<template>
  <!-- ======= Header ======= -->
  <header id="header" class="flex align-items-center">
    <div class="container flex  justify-content-between">
      <a href="./index.html" class="logo">
        <img src="../assets/images/logo.png" alt="">
      </a>
      <ul class="nav flex">
        <li v-for="nav in navList" :key="nav.path">
          <router-link :to="nav.path">{{nav.title}}</router-link>
        </li>
      </ul>
    </div>
  </header><!-- End Header -->
</template>

<script>
export default {
  name: 'Header',
  data() {
    return {
      navList: [
        { title: '首页', path: '/' },
        { title: '作品展示', path: '/portfolio' },
        { title: '博客', path: '/blog-list' },
        { title: '我的简历', path: '/about' },
        { title: '联系我', path: '/concat' },
      ]
    }
  }

}
</script>

<style scoped>
/*--------------------------------------------------------------
# header
--------------------------------------------------------------*/
#header {
  background: #151f2b;
  height: 0.9rem;
  font-size: 0.2rem;
  font-family: Adobe Heiti Std;
}
#header .logo img {
  height: 0.34rem;
}
#header .nav li {
  margin-left: 0.2rem;
}
#header a {
  padding: 0.12rem 0.31rem;
  display: block;
  transition: all 0.2s;
}
#header .nav a.router-link-exact-active,
#header .nav a:hover {
  background: #fe6913;
  border-radius: 0.1rem;
}
</style>